<template>
  <div class="w-full h-full bg-gradient-to-br from-[#fee3e8] to-[#fde2e7] select-none">
    <div class="w-full h-[100px] flex pt-8 pl-12 ">
      <div class="flex">
        <img class="w-[28px] h-[28px] mr-4" src="@/assets/img/tab/star.png" alt="">
        <p class="text-[28px] font-bold text-[#ac395d]">重要</p>
      </div>
    </div>
    <div class="w-full h-[calc(100%-200px)] ">
      <div class=" w-[300px] h-[100px]  m-auto pt-[25%] text-[#ac395d] text-center">
        <p class="text-[14px] ">尝试为一些任努加星标，以便在此处<br>查看它们。</p>
      </div>
    </div>
    <div class="w-full h-[100px] flex justify-center items-center">
      <div class="w-[90%] h-[50%] bg-white opacity-75  hover:opacity-100  rounded-sm  ">
        <button class=" w-[5%] h-full text-[30px] font-light ">+</button>
        <input @keydown.enter="taskStore.addTaskList(task)" v-model="task" class="w-[95%] h-full  rounded" type="text" placeholder="添加任务">
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { taskUseStore } from '@/stores/index'
import { ref } from 'vue'

const taskStore = taskUseStore()
const task = ref('')


</script>
